<template>
    <!-- 整体容器 -->
    <div class="pages">
        <el-container class="page-container">
            <!-- 搜索 -->
            <el-header class="page-header">
                <el-space :size="10">
                    <el-input v-model.trim="lookupData.title" placeholder="请输入商品名称" clearable />
                    <el-input v-model.trim="lookupData.barcode" placeholder="请输入商品条形码" clearable />
                    <el-select v-model="lookupData.status" placeholder="请选择商品状态" clearable>
                        <el-option v-for="(item,index) in adStatusMap" :key="index" :label="item.name"
                            :value="item.value" />
                    </el-select>
                    <el-cascader :options="cascaderCommodity" :props="commodityProps" v-model="lookupData.categoryId "
                        clearable />
                    <el-button type="primary" :icon="Search" @click="handlerLookupCommodi">查找</el-button>
                    <el-button type="primary" :icon="Plus" @click="handlerAddCommodi">添加</el-button>
                </el-space>
            </el-header>
            <el-main class="page-main">
                <!-- 表格 -->
                <div class="main-table">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type='selection' width="40" />
                        <el-table-column type="expand" label="Sku信息">
                            <template #default="props">
                                <div m="4">
                                    <!-- 嵌套表格 -->
                                    <el-table :data="props.row.skuList" border>
                                        <el-table-column label="商品条码" prop="barCode" align="center" />
                                        <el-table-column label="商品规格" prop="specification" align="center" />
                                        <el-table-column label="商品库存" prop="stock" align="center" />
                                        <el-table-column label="原价" prop="originalPrice" align="center" />
                                        <el-table-column label="现价" prop="price" align="center" />
                                        <el-table-column label="VIP价格" prop="vipPrice" align="center" />
                                    </el-table>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- 大表格数据 -->
                        <el-table-column label="商品ID" prop="id" align="center" />
                        <el-table-column label="名称" prop="title" align="center" width='400px' />
                        <el-table-column label="图片" align="center">
                            <template #default="scope">
                                <el-popover placement="right" :width="300">
                                    <template #reference>
                                        <el-image style="height: 30px" :src="scope.row.img" fit="contain" />
                                    </template>
                                    <template #default>
                                        <div style="display: flex;align-items: center">
                                            <el-image :src="scope.row.img" fit="contain" />
                                        </div>
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品详情介绍" align="center" width="90px">
                            <template #default="scope">
                                <el-button type="primary" @click="gitCommodityDetails(scope.row.id)">查看</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="类目ID" prop="categoryId" align="center" />
                        <el-table-column label="邮费模板ID" prop="activityId" align="center" />
                        <el-table-column label="销量" prop="sales" align="center" />
                        <el-table-column label="单位" prop="unit" align="center" />
                        <el-table-column label="是否在售" prop="minNum" align="center">
                            <template #default="scope">
                                <el-tag :type="scope.row.status!=0?'success':'danger'">
                                    {{scope.row.status!=0?"在售":"下架"}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="描述" prop="description" align="center" />
                        <el-table-column label="操作" align="center" width="160px">
                            <template #default="scope">
                                <el-button type="primary" @click="handlerCommodi(scope.row)">编辑</el-button>
                                <el-button :type="scope.row.status==0?'primary':'warning'"
                                    @click="handlerDeleteCommodi(scope.row)">
                                    {{scope.row.status==0?'激活':'下架'}}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class="page-pagination">
                    <Pagination v-bind="commodiPaging" @handle-pagination="emitEntProps" />
                </div>
                <!-- 商品详情介绍弹出框 -->
                <el-dialog v-model="dialogTableVisible" title="商品详情" style="width:600px" align-center>
                    <div class="detail" v-html="detail"></div>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { Search, Plus } from '@element-plus/icons-vue';
import { ClassPagination } from '#/index';
import { reactive, ref, nextTick } from 'vue';
import { post } from "@/utils/index";
import { ElMessage, ElMessageBox,ElLoading } from 'element-plus';
import router from "@/router";


// 获取分页数据
const commodiPaging = reactive(new ClassPagination())
// 弹出框显示隐藏
const dialogTableVisible = ref(false)
const detail = ref('')
// 表格数据
const tableData: TypeCommodi[] = reactive([])
// 搜索的参数
const lookupData = reactive({
    categoryId: '',
    title: '',
    barcode: '',
    status: '',
})
const adStatusMap = reactive([
    { value: 0, name: '下架' },
    { value: 1, name: '在售' },
])
// 获取商品树
const cascaderCommodity: Array<object> = reactive([])
// 下拉选择树，子级配置
const commodityProps = reactive({
    emitPath: false,//返回数字类型数据，true返回数组类型数据
    checkStrictly: true,
    children: 'childrenList',
    value: 'id',
    label: 'title',
})
/**
* 类目树形数据
*/
function getCommodity() {
    let data = {
        _gp: 'admin.category',
        _mt: 'categoryTree'
    }
    post(data).then((res) => {
        if (200 === res.errno) {
            cascaderCommodity.length = 0
            cascaderCommodity.push(...res.data)
        }
    })
}
// 如果已经请求了那么就不用重复请求
if (cascaderCommodity.length <= 0) {
    getCommodity()
}
// 获取初始表格数据
function getInitCommodi() {
    let data = {
        _gp: 'admin.product',
        _mt: 'list',
        page: commodiPaging.page,
        limit: commodiPaging.limit,
        categoryId: lookupData.categoryId,
        title: lookupData.title,
        barcode: lookupData.barcode,
        status: lookupData.status,
    }
    post(data).then((res) => {
        if (200 === res.errno) {
            console.log(res);
            let { items, total } = res.data
            tableData.length = 0
            tableData.push(...items)
            commodiPaging.total = total
        } else {
            ElMessage.error(res.errmsg)
        }
    })
}
// 获取商品详情信息
function gitCommodityDetails(spuId: number) {
    dialogTableVisible.value = true
    let data = {
        _gp: 'admin.product',
        _mt: 'detail',
        spuId
    }
    post(data).then((res) => {
        console.log(res);
        if (200 === res.errno) {
            detail.value = res.data.detail
        } else {
            ElMessage.error(res.errmsg)
        }
    })
}
// 编辑商品
function handlerCommodi(row: TypeGroupPurchaseChild) {
    let id = row.id
    router.push({
        name:'EditCommodi',
        params:{
            id
        }
    })
}
// 上架/下架商品
function handlerDeleteCommodi(row: TypeGroupPurchaseChild) {
    ElMessageBox.confirm(
        '是否确认此操作?',
        '提示',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }
    ).then(() => {
        const loading = ElLoading.service({
                lock: true,
                text: '正在查询',
                background: 'rgba(0, 0, 0, 0.8)',
            })
        let data = {
            _gp: 'admin.product',
            _mt: 'freezeOrActivation',
            spuId: row.id,
            status: row.status == 0 ? 1 : 0
        }
        setTimeout(() => {
            loading.close()
            post(data).then((res) => {
                if (200 === res.errno) {
                    getInitCommodi()
                    ElMessage.success("操作成功")
                } else {
                    ElMessage.error(res.errmsg)
                }
            })
        }, 400) 
        
    }).catch(() => {
        ElMessage.warning("已取消操作")
    })

}
// 查找商品
function handlerLookupCommodi() {
    commodiPaging.page = 1
    getInitCommodi()
}
// 添加商品
function handlerAddCommodi() {
    router.push({
        name:'AddCommodi'
    })
}




/**
 * 分页组件传递过来的数据
 * @param val
 * page:页数
 * limit:条数
 */
function emitEntProps(val: { page: number, limit: number }) {
    let paging = commodiPaging
    paging.page = val.page
    paging.limit = val.limit
    getInitCommodi()
}
// 初次调用
getInitCommodi()
</script>

<style lang="less" scoped>
.detail {
    width: 100%;
    text-align: center;

    :deep img {
        width: 100%;
    }

    :deep img:nth-child(1) {
        max-width: 100%;
        width: auto;
    }
}
</style>